<template>
  <view @touchstart="handleTouchstart" @touchend="handleTouchend">
    <slot></slot>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startTime: 0,
      startX: 0,
      startY: 0,
    };
  },
  methods: {
    handleTouchstart(e) {
      this.startTime = Date.now();
      this.startX = e.changedTouches[0].clientX;
      this.startY = e.changedTouches[0].clientY;
    },
    handleTouchend(e) {
      let endTime = Date.now();
      let endX = e.changedTouches[0].clientX;
      let endY = e.changedTouches[0].clientY;
      if (endTime - this.startTime > 3000) return;
      if (Math.abs(endX - this.startX) < 50 || Math.abs(endY - this.startY) > 50) return;
      var directer = endX - this.startX > 0 ? "right" : "left";
      this.$emit("swiperAction", { directer });
    },
  },
};
</script>

<style></style>
